<template>
	<div class="box">
		<div class="d-flex d-flex-between d-flex-items-center header">
			<img src="@/assets/image/logo-3.png" class="w-15p">
			<div>咨询电话: {{ serviceInfor.contact_tel }}</div>
		</div>
		<div class="center">
			<img src="@/assets/image/banner-1.png" class="banner">
			<div class="login-box">
				<div class="d-flex-between d-flex-items-center">
					<div class="f-26 font-weight-bold">{{ isLogin ? '注册' : '登录' }}</div>
					<div class="f-16 c-0D5FCD c-p" @click="isLogin = !isLogin">{{ isLogin ? '直接登录' : '账号注册' }}</div>
				</div>
				<!-- 登录 -->
				<div class="m-t-20" v-if="!isLogin">
					<el-form :model="form" label-width="auto" size="small" label-position="left">
						<el-form-item label="手机号">
							<el-input v-model="form.mobile" placeholder="请输入" minlength="11" maxlength="11" />
						</el-form-item>
						<el-form-item label="密码">
							<el-input v-model="form.password" placeholder="请输入" type="password" />
						</el-form-item>
						<div class="c-99 f-14 d-flex-end m-b-20">忘记密码</div>
						<div class="m-b-20 f-12 m-t-10 d-flex-center d-flex-items-center">
							<img src="@/assets/image/dui-1.png" class="w-15 h-15 m-r-10" v-if="!agreementShow"
								@click="agreementClick">
							<img src="@/assets/image/dui-2.png" class="w-15 h-15 m-r-10" v-if="agreementShow"
								@click="agreementClick">
							我已阅读 <span @click="touserAgreement" class="userAgreement">《用户服务协议》</span>和 <span @click="toPrivateAgreement" class="userAgreement">《用户隐私协议》</span>
						</div>
						<el-button type="danger" class="w-100p" @click="tologin">立即登录</el-button>
					</el-form>
				</div>
				<!-- 注册 -->
				<div class="m-t-20" v-else>
					<el-form :model="formRegiest" label-width="auto" size="small" label-position="left">
						<el-form-item label="手机号">
							<el-input v-model="formRegiest.mobile" minlength="11" maxlength="11" placeholder="请输入" />
						</el-form-item>
						<el-form-item label="验证码">
							<el-input v-model="formRegiest.mobile_code" :maxlength="6" :minlength="6" placeholder="请输入"
								οnfοcus="this.removeAttribute('readonly');"></el-input>
							<div @click.prevent="getCode">
								<button class="send" v-if="flag">获取验证码</button>
								<button class="send" v-if="!flag">剩余{{ second }}s</button>
							</div>
						</el-form-item>
						<el-form-item label="邮箱">
							<el-input v-model="formRegiest.email" placeholder="请输入" />
						</el-form-item>
						<el-form-item label="密码">
							<el-input v-model="formRegiest.user_pass" placeholder="请输入" type="password" />
						</el-form-item>
						<div class="m-b-20 f-12 m-t-10 d-flex-center d-flex-items-center">
							<img src="@/assets/image/dui-1.png" class="w-15 h-15 m-r-10" v-if="!agreementShow"
								@click="agreementClick">
							<img src="@/assets/image/dui-2.png" class="w-15 h-15 m-r-10" v-if="agreementShow"
								@click="agreementClick">
							我已阅读 <span @click="touserAgreement" class="userAgreement">《用户服务协议》</span>和 <span @click="toPrivateAgreement" class="userAgreement">《用户隐私协议》</span>
						</div>
						<el-button type="danger" class="w-100p" @click="toregister">注册</el-button>
					</el-form>
				</div>
			</div>
		</div>

		<div class="bottom">
			<div class="d-flex d-flex-between d-flex-items-center b-b h-60p">
				<img src="@/assets/image/logo-2.png" class="w-15p">
				<div>咨询电话: {{ serviceInfor.contact_tel }}</div>
			</div>
			<div class="f-16 bottom-desc d-flex-items-center">{{ serviceInfor.ba_no }}&nbsp;&nbsp;{{
				serviceInfor.address }}&nbsp;&nbsp;{{ serviceInfor.banquan }}</div>
		</div>
	</div>
</template>

<script>
import { smsUrl } from '../../utils/baseUrl.js'
import { encryptCBC } from '@/utils/aes.js';

export default {
	data() {
		return {
			isLogin: false,
			agreementShow: false,
			form: {
				mobile: '',
				password: '',
			},
			formRegiest: {
				mobile: '',
				email: '',
				user_pass: '',
				mobile_code: ''
			},
			serviceInfor: {},
			second: 60,
			flag: true,
			timer: null, // 该变量是用来记录定时器的,防止点击的时候触发多个setInterval
		}
	},
	mounted() {
		this.judgeCode();
		this.rcjjBaseData();
	},
	methods: {
		async rcjjBaseData() {
			let res = await this.$service.get({
				url: "/api/rcjj/v1/rcjj_base_data",
			});
			if (res.code == 1) {
				localStorage.setItem('rcjj_base_data', JSON.stringify(res.info))
				this.serviceInfor = res.info
			} else {
				this.$message.error(res.msg);
			}
		},
		agreementClick() {
			this.agreementShow = !this.agreementShow
		},
		// 获取短信验证码
		async sendCode() {
			this.loading = this.$loading({
				lock: true,
				text: "发送中",
				spinner: "el-icon-loading",
				background: "rgba(255, 255, 255, 0.7)",
			});
			let res = await this.$service.post({
				url: smsUrl,
				data: {
					mobile: this.formRegiest.mobile,
					scene: "register",
				},
			});
			if (this.loading) {
				this.loading.close();
			}
			if (res.code == 1) {
				this.$message.success(res.msg);
			} else {
				this.$message.error(res.msg);
			}
		},
		// 用户注册
		async toregister() {
			this.loading = this.$loading({
				lock: true,
				text: "注册中",
				spinner: "el-icon-loading",
				background: "rgba(255, 255, 255, 0.7)",
			});
			let regis_data = {
				mobile: this.formRegiest.mobile,
				user_pass: this.formRegiest.user_pass,
				mobile_code: this.formRegiest.mobile_code,
				email: this.formRegiest.email,
			}
			regis_data = JSON.stringify(regis_data)
			let res = await this.$service.post({
				url: "/api/rcjj/v1/rcjj_user_regis",
				data: {
					regis_data: encryptCBC(regis_data)
				}
			});
			if (this.loading) {
				this.loading.close();
			}
			if (res.code == 1) {
				this.$message.success(res.msg);
				setTimeout(() => {
					this.isLogin = !this.isLogin
				}, 1000);
			} else {
				this.$message.error(res.msg);
			}
		},
		/**
		 * 获取短信验证的方法
		 */
		getCode() {
			let that = this;
			if (that.flag) {
				if (!that.formRegiest.mobile || !/^1[3-9]\d{9}$/.test(that.formRegiest.mobile)) {
					that.$message.error("手机号码格式不正确");
					return;
				}
				that.flag = false;
				this.sendCode();
				let interval = setInterval(function () {
					that.setStorage(that.second);
					if (that.second-- <= 0) {
						that.second = 60;
						that.flag = true;
						clearInterval(interval);
					}
				}, 1000);
			}
		},
		/**
		 * 写入和读取localstorage
		 */
		setStorage(parm) {
			localStorage.setItem("dalay", parm);
			localStorage.setItem("_time", new Date().getTime());
		},
		getStorage() {
			let localDelay = {};
			localDelay.delay = localStorage.getItem("dalay");
			localDelay.sec = localStorage.getItem("_time");
			return localDelay;
		},
		/**
		 * 防止页面刷新是验证码失效:
		 */
		judgeCode() {
			let that = this;
			let localDelay = that.getStorage();
			let secTime = parseInt((new Date().getTime() - localDelay.sec) / 1000);
			console.log(localDelay);
			if (secTime > localDelay.delay) {
				that.flag = true;
				console.log("已过期");
			} else {
				that.flag = false;
				let _delay = localDelay.delay - secTime;
				that.second = _delay;
				that.timer = setInterval(function () {
					if (_delay > 1) {
						_delay--;
						that.setStorage(_delay);
						that.second = _delay;
						that.flag = false;
					} else {
						// 此处赋值时为了让浏览器打开的时候,直接就显示剩余的时间
						that.flag = true;
						clearInterval(that.timer);
					}
				}, 1000);
			}
		},
		// 用户登录
		async tologin() {
			if (!this.agreementShow) {
				this.$message({
					message: '请阅读相关用户协议',
					type: 'info'
				})
				return;
			}
			this.loading = this.$loading({
				lock: true,
				text: '登录中',
				spinner: 'el-icon-loading',
				background: 'rgba(255, 255, 255, 0.7)'
			})

			let login_data = {
				mobile: this.form.mobile,
				password: this.form.password
			}
			login_data = JSON.stringify(login_data)

			let res = await this.$service.post({
				url: '/api/rcjj/v1/rcjj_user_login',
				data: {
					login_data: encryptCBC(login_data)
				}
			})

			if (this.loading) {
				this.loading.close()
			}

			console.log(res);
			if (res.code == 1) {
				this.$store.dispatch('user/login', res.info)
				this.$message({
					message: '登录成功',
					type: 'success'
				})

				setTimeout(() => {
					this.$store.dispatch('common/init')
					this.$router.push('/index')

					this.$uWeb.postMessage({
						data: {
							action: 'message',
							params: res.info
						}
					})
				}, 1000)
			} else {
				this.$message.error(res.msg)
			}
		},
		touserAgreement() {
			window.open('#/userAgreement')
		},
		toPrivateAgreement() {
			window.open('#/privateAgreement')
		},
		
	},
}
</script>

<style>
body {
	background: #fff;
}
</style>
<style scoped>
.box {
	height: 100vh;
}

.header {
	height: 10%;
	padding: 0 8%;
	width: 84%;
}

.center {
	height: 70%;
	width: 100%;
	position: relative;
}

.banner {
	width: 100%;
	height: 100%;
}

.bottom {
	width: 76%;
	height: 20%;
	background: #1F252D;
	color: #fff;
	padding: 0 12%;
}

.bottom-desc {
	height: 40%;
	width: 100%;

}

.login-box {
	position: absolute;
	background: #fff;
	z-index: 9;
	right: 20%;
	top: 13%;
	width: 21%;
	padding: 2%;
	border-radius: 20px;
}

.c-0D5FCD {
	color: #0D5FCD;
}

.send {
	width: 107px;
	background: #fff;
	border: none;
	font-size: 14px;
	color: #143E9B;
	text-align: center;
	position: absolute;
	top: 6px;
	right: 2px;
}

.w-15p {
	width: 25%;
}

.userAgreement {
	color: #3a8ee6;
}

@media (max-width: 768px) {
	* {
		font-size: 12px;
	}

	.h-60p {
		height: 50%;
	}

	.login-box {
		right: 10%;
		top: 13%;
		width: 70%;
		padding: 5%;
	}

	::v-deep .el-form-item__label {
		font-size: 12px;
	}

	.f-26 {
		font-size: 18px;
	}

	.center {
		display: flex;
		justify-content: center;
	}
}
</style>
